<template>
  <div>
    <table2 :data="tableData">
      <table-col label="哈哈" labelkey="haha">
        <template slot-scope="scope">
          <div class="hahaha">
            {{scope}}
          </div>
        </template>
      </table-col>
      <table-col label="呵呵" labelkey="hehe">
        <template slot-scope="scope">
          <div>
            {{scope}}
          </div>
        </template>
      </table-col>
      <table-col label="嘻嘻" labelkey="xixi">
        <template slot-scope="scope">
          <div>
            {{scope}}
          </div>
        </template>
      </table-col>
      <table-col label="乐乐" labelkey="lele">
        <template slot-scope="scope">
          <div>
            {{scope}}
          </div>
        </template>
      </table-col>
    </table2>
  </div>
</template>

<script>
export default {
  components: {
    table2: require('./table2.vue').default,
    tableCol: require('./table-col.vue').default
  },
  data () {
    return {
      tableData: [
        {
          haha: '1dasdas',
          hehe: 'sdfsadfsd',
          xixi: 'sdsfssdfsd',
          lele: 'asdfasdasd'
        },
        {
          haha: 'ssdfsdf',
          hehe: 'xccvxcvxcv',
          xixi: 'dfmmmmmmmm'
        }
      ]
    }
  }
}
</script>

<style>
.hahaha{
  background: red;
  color: white;
}
</style>
